<template>
<div>
<div id="e">
  <el-form :model="login" class="border w-50 mx-auto">
    <el-form-item>
      <div class="fs-2 mx-auto">新闻发布系统</div>
    </el-form-item>

    <el-form-item>
      <div class="fs-5 mx-auto">用户注册</div>
    </el-form-item>

    <el-form-item>
      <el-col :span="18" class="text-end fs-5">
        <span>用户名:</span>
      <el-input v-model="login.username" class="w-50 mx-auto ps-1" placeholder="请输入用户名"></el-input>
      </el-col>
      </el-form-item>
    <el-form-item>
      <el-col :span="18" class="text-end fs-5">
        <span>密码:</span>
      <el-input v-model="login.password" class="w-50 mx-auto ps-1" placeholder="请输入密码"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-col :span="12" class="mx-auto w-25 ps-5 fs-6">
        <router-link to="login">切换</router-link>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button class="mx-auto fs-4" @click="loginAction">注册</el-button>
    </el-form-item>
  </el-form>
</div>
</div>
</template>

<script>
import auth from '@/auth/auth.js';
export default {
  name: "NewsLogin",
  data() {
    return {
      login: {
        username: null,
        password: null,
      },
    };
  },
  methods: {
    loginAction() {
      this.$axios.post("/api/login", this.login).then((response) => {
        let data = response.data;
        if (data.code == 200) {
          let token = data.data;
          auth.saveToken(token);
          this.$router.push("/");
        } else {
          alert(data.msg);
        }
      })
    },
  },
};
</script>

<style scoped>
#e{
  height:100%;
  width:100%;
  position:fixed;
  background-position: center center;
  background-size:cover;
  background-repeat:no-repeat;  
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi1%2F190816932%2FO1CN01L2vuTQ214u93irivH_%21%21190816932.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659006813&t=1cab6eb365aee9c861e3a5ed2161aa60");
  padding-top:200px;
  padding-bottom:200px;
  
}
.el-form{
  background-color: #87cefa; 
  height: 25rem ;
  width:20rem;
  border-radius:3rem;
  opacity:0.7;
  padding-bottom:100px;
  padding-top:50px
  
  

}

</style>